<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<link>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css"/>
  <style>
    .map {
      height: 500px;
      width: 500px;
    }
  </style>
  <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
  <title>OpenLayers example</title>
</head>
<body>
<h2>北京地图演示</h2>




<form action="" method="post">
  请输入要查询的城市<input type="text" name="address"/>
  <input type="submit" />
</form>

<div id="map" class="map"></div>
<script th:inline="javascript">
  var mapX = [[${mapX}]];
  var mapY = [[${mapY}]];
  console.log(mapX);
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      //北京中心坐标
      center: ol.proj.fromLonLat([mapX,mapY]),
      zoom: 10
    })
  });
</script>
</body>
</html>
